<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    *{
      padding: 0;
      margin: 0;
    }
    #all{
      width: auto;
      height: 2000px;
      background-color: #9f9f9f;
    }
    #head{
      width: auto;
      height: 100px;
      background-color: #00f7de;
      border: 1px black solid;
    }
    #h_l{
      float: left;
      width: 100px;
      height: 80px;
      margin: 0 auto;
      margin-left: 2%;
      line-height: 100px;
    }
    #h_l span{

    }
    #h_m{
      float: left;
      width: 200px;
      height: 80px;
      margin: 0 auto;
      margin-left: 35%;
      line-height: 100px;
    }
    #h_m span{

    }
    #h_r{
      float: left;
      width: 100px;
      height: 100px;
      margin-left: 35%;
    }
    #img{
      width: 70px;
      height: 90px;
      border: 1px solid black;
      margin-top: 5px;
    }
    #main{
      width: auto;
      height: 500px;
      background-color: #ffb800;
      padding-top: 100px;
      padding-bottom: 100px;
    }
    #m_m{
      width: 700px;
      height: 450px;
      margin: 0 auto;
      background-color: #9f9f9f;
      float: left;
    }
    #m_l{
      width: 20%;
      height: 350px;
      float: left;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    #m_r{
      width: 30%;
      height: 350px;
      float: left;
    }
    #title{
      width: 700px;
      height: 50px;
      line-height: 50px;
    }
    #title span{
      font-size: 30px;
      display:block;
      text-align:center;
    }
    #message{
      width: 699px;
      height: 298px;
      overflow-y:auto;
      border: #0c0c0c 1px solid;
      border-right:  0px;
    }
    .message{
      width: 90%;
      height: 70px;
      margin: 0 auto;
      border: 2px #c2be9e solid;
      border-radius: 10px;
      margin-top: 30px;
    }
    .msg_l{
      float: left;
      margin-top: 2.5px;
      margin-left:10px;
      width: 65px;
      height: 65px;
    }
    .msg_img_d{
      margin: 0 auto;
      width: 48px;
      height: 48px;
      border: 1px black solid;
    }
    .msg_img{
      width: 48px;
      height: 48px;
    }
    .msg_name{
      margin: 0 auto;
      width: 65px;
      height: 17px;
      font-size: 10px;
      display:block;
      text-align:center;
    }
    .msg_text_d{
      margin-top: 1.5px;
      width: 500px;
      height: 65px;
      float: left;
      border: 1px black solid;
      margin-left: 20px;
      border-radius: 5px;
    }
    .msg_text{
      margin-top: 5px;
      margin-left: 5px;
    }
    #send{
      width: 700px;
      height: 100px;
    }
    #send_text{
      margin-top: 5px;
      margin-left: 5px;
      height: 90px;
      width: 595px;
      float: left;
      resize: none;
    }
    #send_btn{
      width: 90px;
      height: 90px;
      margin-top: 5px;
      margin-left: 5px;
      float: left;
      cursor: pointer;
    }
    #fly_r{
      position: fixed;
      right: -100px;
      top: 30%;
    }
    #fly_r:hover{
      right: 0px;
    }
  </style>
</head>
<body>
<div id="all">
  <div id="head">
    <div id="h_l">
      <span>欢迎,[[*{session.user.user_name}]]</span>
    </div>
    <div id="h_m">
      <span id="time"></span>
    </div>
    <div id="h_r">
      <div id="img_div">
        <img id="img" src="/userimg/undefined.jpg"/>
      </div>
    </div>
  </div>
  <div id="main">
    <div id="m_l">

    </div>
    <div id="m_m">
      <div id="title">
        <span>留言板</span>
      </div>
      <div id="message">
        <div class="message">
          <div class="msg_l">
            <div class="msg_img_d">
              <img class="msg_img" src="/userimg/undefined.jpg"/>
            </div>
            <div>
              <span class="msg_name">你的名字</span>
            </div>
          </div>
          <div class="msg_text_d">
          <span class="msg_text">
            我要更美丽的界面
          </span>
          </div>
        </div>
        <div class="message" th:each="msgBoard,msgBoardStat:${application.msgBoards}">
          <div class="msg_l">
            <div class="msg_img_d">
              <img class="msg_img" th:src="${msgBoard.user.user_img_path}+${msgBoard.user.user_img_name}"/>
            </div>
            <div>
              <span class="msg_name" th:text="${msgBoard.user.user_name}"></span>
            </div>
          </div>
          <div class="msg_text_d">
          <span class="msg_text" th:text="${msgBoard.msg_content}"></span>
          </div>
        </div>
      </div>
      <div id="send">
        <textarea id="send_text" maxlength="80"></textarea>
        <button id="send_btn" onclick="send()">发送</button>
      </div>
    </div>
    <div id="m_r">

    </div>
  </div>
  <div id="fly_r">

  </div>
</div>

  <script src="./layui/layui.js"></script>
  <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
  <script type="text/javascript" src="js/ajaxfileupload.js" charset="GBK"></script>
  <script th:inline="javascript">
    function setImg(){
      var imgObjPreview=document.getElementById("img");
      imgObjPreview.src = [[*{session.user.user_img_path}]] + [[*{session.user.user_img_name}]] ;
    }
  </script>
  <script type="text/javascript">
    $(function() {
      init();
      $('#fly_r').load('userlist.html');
    })
    function init() {
      setImg();
      setTime();
    }
    function setTime(){
      var time=document.getElementById("time");
      var date=new Date();
      time.innerHTML = date.toLocaleString();
    }
    function send(){
      var text = $('#send_text').val();
      if(text!=""||text!=null){
        $.ajax({
          type:"post",//请求类型
          url:"addMsgBoard",//请求地址
          dataType:"json",//交互的数据类型
          data:{
            msg_content:text
          },
          cache:false,//去除请求的缓存
          success:function(){
            alert("发送成功");
            location.reload();
          }
        });
      }else{
        alert("请输入发送内容");
      }
    }

  </script>
  <script language="JavaScript">
    setInterval(function(){setTime();},1000);
    //指定1秒刷新一次
  </script>
</body>
</html>